<template>
    <div class="crumbs">
        <el-breadcrumb  separator-class="el-icon-arrow-right">
            <i :class="menuStatus ? 'icon-ali-zhankaicaidan' : 'icon-ali-shouqicaidan'" class="iconfont "></i>
            <template v-if="parent!=''">
                <el-breadcrumb-item>
                    <span @click="toggle">{{parent}}</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item> {{node}}</el-breadcrumb-item>
            </template>
            <template v-else>
                <el-breadcrumb-item><i class="el-icon-menu"></i> {{node}}</el-breadcrumb-item>
            </template>
        </el-breadcrumb>
    </div>
</template>
<script>
  import { mapActions, mapGetters } from 'vuex'
  export default {
    name: 'nav-title',
    computed: {
      ...mapGetters(['menuStatus']),
    },
    props: {
      changeValue: {
        type: Number
      }
    },
    watch: {
      changeValue: function () {
        this.parent = localStorage.getItem('parent')
        this.node = localStorage.getItem('node')
      }
    },
    data: function () {
      return {
        parent: '',
        node: ''
      }
    },
    created: function () {
      this.parent = localStorage.getItem('parent')
      this.node = localStorage.getItem('node')
    },
    methods:{
      ...mapActions(['toggle']),
    }
  }
</script>
<style>
    .crumbs .icon-ali-shouqicaidan, .crumbs .icon-ali-zhankaicaidan{
        float: left;
        font-size: 28px;
        position: relative;
        top: -6px;
    }

</style>